<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#hd{
				width: 500px;
				height: 40px;
				margin: 200px auto;
				border: 2px solid orangered;
				position: relative;
				overflow: hidden;
			}
			#hd ul{
				position: absolute;
				top: 0;
				left: 0;
			}
			#hd ul li{
				width: 500px;
				height: 40px;
				list-style: none;
				line-height: 40px;
				text-align: center;
				
			}
		</style>
	
	<script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	
	$(function(){
//		大总管变量
		var c = 0;
//		设置定时器,让ul每隔一秒钟滑动一次
		setInterval(function(){
			c++;
			if (c==5) {
//				让ul做一个瞬时变化
				$("#hd ul").css({'top':'0px'});
				c=1;
			}
//			计算ul应该到达的top值
			var t = c*-40;
//			让ul滑动上去
			$("#hd ul").animate({'top':t+'px'},500);
		},1000)
	})
	
	
	</script>
	</head>
	<body>
		
		<div id="hd">
			<ul>
				<li style="background: greenyellow;">陕西一干部扇教师耳光 因学校让签"安全保证书"</li>
				<li style="background: orange;">河南孤寡失明老人"吃猪食"度日 现已入住敬老院</li>
				<li style="background: dodgerblue;">北京首列磁悬浮列车上线调试，时速100公里2017年投运</li>
				<li style="background: deeppink;">90后爱开网店是国家隐患 危害实体经济</li>
				<li style="background: greenyellow;">陕西一干部扇教师耳光 因学校让签"安全保证书"</li>
				
			</ul>
		</div>
		
		
		
	</body>
</html>
